<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/sys/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@ include file="/WEB-INF/adminui/include/css.jsp" %>
<style type="text/css">
.bottomBox{height:100%; margin:50px auto;}
.qxBox{height:500px;border:1px solid #666;}
</style>
<title>库存统计</title>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
	<div class="row">
		<div class="col-sm-2">
			<div class="ibox ibox-body">
				<div class="ibox-title">
					<h5>选择仓库</h5>
				</div>
				<div class="ibox-content">
					<div id="jstree"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-10">
			<div class="ibox">
				<div class="ibox-body">
					<div class="fixed-table-toolbar">
						<div id="toolbar" class="columns pull-left">
							
						</div>
						
						<%-- <div class="columns pull-left nopadding" style="width:140px;">
							<input id="begin" type="text" class="laydate-icon laydate-icon2 form-control" placeholder="开始年月" value="${begin }" />
						</div>
						<div class="columns pull-left nopadding" style="vertical-align:middle;height:34px;line-height:34px;padding:0 5px;">至</div>
						<div class="columns pull-left nopadding" style="width:140px;margin-right:5px;">
							<input id="end" type="text" class="laydate-icon laydate-icon2 form-control" placeholder="结束年月" value="${end }" />
						</div>
						<div class="columns pull-left">
							<button class="btn btn-success" onclick="doStatistics()">统计</button>
						</div> --%>
						
					</div>
					<table id="dataTable" data-mobile-responsive="true">
					</table>
				</div>
			</div>
			<div class="bottomBox">
				<div id="container" style="min-width:400px;height:400px"></div>
			</div>
		</div>
	</div>
</div>
<%@ include file="/WEB-INF/adminui/include/script.jsp" %>
<script src="${path}/res/adminlist/js/plugins/highcharts/highstock.js" type="text/javascript"></script>
<script src="${path}/res/adminlist/js/plugins/highcharts/highcharts-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var chart, repertoryid;
$(function(){
	UiList.render({
		treeUrl: '${path}/repertory/lefttree.json',
		treeWidth: 300,
		onTreeSelect : function(node) {
			repertoryid = node.id;
			createQjd();
		}
	});
	createQjd();
});
function createQjd(){
	if(chart){
		try {
			chart.destroy();
			$("#container").empty();
		} catch (e) {
		}
	}
	$.get('${path}/gi/getXltjData.json', {repertoryid:repertoryid}, function(data){
		if(!data || !data.categories){
			return;
		}
		/* if(data.categories.length>13){
			$("#container").height(100 + data.categories*30);
		}else{
			$("#container").height(500);
		} */
		chart = Highcharts.chart('container',{
			credits: {
				enabled: false
			},
			chart: {
				type: 'column'
			},
			title: {
				text: '库存数量'
			},
			xAxis: {
				categories: data.categories,
				crosshair: true
			},
			yAxis: {
				min: 0,
				title: {
					text: '数量(个)'
				}
			},
			tooltip: {
				// head + 每个 point + footer 拼接成完整的 table
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
				'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					borderWidth: 0
				}
			},
			series: [{
				name: '入库量',
				data: data.inNum
			}, {
				name: '出库量',
				data: data.outNum
			}, {
				name: '库存剩余',
				data: data.giNum
			}]
		});
	});
}
</script>
</body>
</html>